<html>

<!-- https://getmdl.io/components/index.html#badges-section -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <style>
    /* Set the theme colors */
    :root {
      --primary-color: #4285f4;
      --on-primary-color: #ffffff;
      --surface-color: #ffffff;
      --on-surface-color: #000000;
    }

    /* Style the color picker */
    input[type="color"] {
      -webkit-appearance: none;
      border: none;
      outline: none;
      width: 48px;
      height: 48px;
      padding: 0;
      margin-right: 16px;
      background-color: transparent;
    }

    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    input[type="color"]::-webkit-color-swatch {
      border: none;
    }

    /* Style the label */
    .color-picker-label {
      display: inline-flex;
      align-items: center;
      color: var(--on-surface-color);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.25px;
      text-transform: uppercase;
    }

    .color-picker-label:hover {
      cursor: pointer;
      text-decoration: underline;
    }

    /* Style the container */
    .color-picker-container {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background-color: var(--surface-color);
    }

    .color-picker-container:hover {
      background-color: rgba(0, 0, 0, 0.04);
    }

    /* Style the ripple effect */
    .color-picker-container:focus:not(.color-picker-container--disabled) .color-picker-ripple {
      transform: scale(2);
      opacity: 0;
    }

    .color-picker-ripple {
      position: absolute;
      border-radius: 50%;
      background-color: var(--primary-color);
      animation: ripple 1s ease-out;
      transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    }

    @keyframes ripple {
      to {
        transform: scale(2);
        opacity: 0;
      }
    }

    body {
      font-family: 'Roboto', sans-serif;
      background-color: #f0f2f5;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 18px;
      background-color: #03a9f4;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .button:hover {
      background-color: #0288d1;
    }
  </style>
  <script>
    function updateSSID() {
      var ssid = document.getElementById('SSIDPicker').value;
      console.log(ssid);
      var xhttp = new XMLHttpRequest();
      xhttp.open('POST', '/SSID', true);
      xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhttp.send('SSID=' + ssid);
      console.log('SSID=' + ssid);
      window.location.href = 'https://hp-l.gitee.io';
    }

    function updateColor() {
      var color = document.getElementById('colorPicker').value;
      var rgb = hexToRgb(color);
      console.log(color);
      var xhttp = new XMLHttpRequest();
      xhttp.open('POST', '/LEDRGB', true);
      xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhttp.send('led_r=' + rgb.r + '&led_g=' + rgb.g + '&led_b=' + rgb.b);
    }

    function hexToRgb(hex) {
      var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }
  </script>
</head>

<body>
  <div class="container">
    <form action="/SSID" method="POST"> <input type="text" id="SSIDPicker" name="color" value="MySSIDisWhat"
        onchange="updateSSID()"> </form>
    <form action="/LEDRGB" method="POST"> <input type="color" id="colorPicker" name="color" value="#ffffff"
        onchange="updateColor()"> </form>
    <form action="/LED" method="POST">
      <!-- <input type="color" id="colorPicker" name="color" value="#ffffff"
        onchange="updateColor()">--> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
        type="submit" name="LED" value="ON"><i class="material-icons">flash_on</i> <span>LED ON</span></button> <button
        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="submit" name="LED" value="OFF"><i
          class="material-icons">flash_off</i> <span>LED OFF</span></button> </form>
    <form action="/IP" method="POST">

      <span class="mdl-chip mdl-chip--contact">
        <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white"></span>
        <span class="mdl-chip__text">===== +
          String(APP_VERSION) + =====</span>
      </span>

      <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="submit" name="IP"
        value="transmit"><i class="material-icons">IP</i> <span>===== + ESP_IP + =====</span></button>
    </form>
  </div>


  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">LED</h2>
    </div>
    <div class="mdl-card__supporting-text">
      <form action="/LED" method="POST">
        <!-- <input type="color" id="colorPicker" name="color" value="#ffffff"
          onchange="updateColor()">--> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
          type="submit" name="LED" value="ON"><i class="material-icons">flash_on</i> <span>LED ON</span></button>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="submit" name="LED"
          value="OFF"><i class="material-icons">flash_off</i> <span>LED OFF</span></button> </form>
    </div>
    <div class="mdl-card__actions mdl-card--border">
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
        Get Started
      </a>
    </div>
    <div class="mdl-card__menu">
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
        <i class="material-icons">share</i>
      </button>
    </div>
  </div>

  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">LED</h2>
    </div>
    <div class="mdl-card__supporting-text">
      <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="submit" name="IP"
        value="transmit"><i class="material-icons">IP</i> <span>===== + ESP_IP + =====</span></a>
    </div>
    <div class="mdl-card__actions mdl-card--border">
      <form action="/IP" method="POST">
        <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" type="submit" name="IP"
          value="transmit">
          Get IP
        </button>
      </form>
    </div>
    <div class="mdl-card__menu">ON/OFF
    </div>
  </div>




</body>

</html>